import React, { useRef, useState } from "react";
import type { ActionRefType } from "@alipay/techui-rule-tree";
import { RuleTree } from "@alipay/techui-rule-tree";
import type { FormInstance } from "antd";
import { Form, Input, Tag, Tooltip, Select } from "antd";

export default function App() {
  const [value, setValue] = useState({});
  const formRef = useRef<FormInstance>();
  const actionRef = useRef<ActionRefType<{ name: string }>>();

  return (
    <div>
      <p>组合使用render与api定制逻辑</p>
      <RuleTree<{ name: string }>
        formRef={formRef}
        onChange={(v) => {
          setValue(v);
        }}
        draggable={false}
        actionRef={actionRef}
        relationRender={() => {
          return (
            <Select
              options={[
                { label: "与", value: "&&" },
                { label: "或", value: "||" },
                { label: "非", value: "!" },
              ]}
            />
          );
        }}
        onRelationChange={(relationValue, option, fields) => {
          // 非 - 删除多余的数据（倒着删）
          if (relationValue === "!") {
            if (fields.count === 0) {
              actionRef.current!.add(fields.levelPath);
            } else if (fields.count > 1) {
              for (let i = fields.count - 1; i > 0; i--) {
                actionRef.current!.remove(fields.levelPath, i);
              }
            }
          }
        }}
        actionRender={({ removeDom }, action, { levelPath }) => {
          const groupData = action.getGroupData();
          return [
            groupData.relation === "!" && (
              <Tag
                key={"copy"}
                style={{ cursor: "pointer" }}
                onClick={() => {
                  actionRef.current!.addGroup(
                    levelPath,
                    { relation: "&&", children: [{}, {}] },
                    0
                  );
                  actionRef.current!.remove(levelPath, 1);
                }}
                color="blue"
              >
                切换
              </Tag>
            ),
            (groupData.relation !== "!" ||
              (groupData.relation === "!" && levelPath?.length !== 0)) && (
              <Tooltip
                key={removeDom.key}
                title="使用tooltip包裹，使用React.cloneElement修改props"
              >
                {React.cloneElement(removeDom)}
              </Tooltip>
            ),
          ];
        }}
        createRender={(doms, action) => {
          const groupData = action.getGroupData();
          const isNot = groupData.relation === "!";
          const showAdd = !isNot || (isNot && groupData?.children.length === 0);
          return [
            showAdd && (
              <Tag
                key={"add"}
                style={{ cursor: "pointer" }}
                onClick={() => action.add()}
                color="blue"
              >
                添加规则
              </Tag>
            ),
            showAdd && (
              <Tag
                key={"addGroup"}
                style={{ cursor: "pointer" }}
                onClick={() =>
                  action.addGroup({ relation: "&&", children: [{}, {}] })
                }
                color="orange"
              >
                添加规则组
              </Tag>
            ),
          ].filter(Boolean);
        }}
        defaultValue={{ relation: "&&", children: [] }}
      >
        {(field) => {
          return (
            <Form.Item
              noStyle
              name={[field.name, "name"]}
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          );
        }}
      </RuleTree>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
